<template>

  <div class="page-main">
    <el-row :gutter="30">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header> 延迟出院率 </template>
          <charts-line :lineData="state.lineData" :line_x="state.line_x"></charts-line>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="30">
      <span class="title-span"
      >2023-01至2023-02当延迟出院率</span
      >
      <el-divider/>
      <el-col :span="24">
        <el-table :data="tableData"  :summary-method="getSummaries"
                  show-summary style="width: 100%">
          <el-table-column prop="value_0" label="统计日期"/>
          <el-table-column prop="value_1" label="延迟出院率"/>

        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="exitReason">
import chartsLine from '/@/components/charts/line.vue';
const tableData = ref([
  {value_0:'2023-01',value_1:"0"},
  {value_0:'2023-21',value_1:"0"}

])
const state = reactive({
  lineData: [
    {
      name: '数据1',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [10, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120],
    },
  ],
  line_x: [
    '2023-01',
    '2023-02',
  ]})

const getSummaries = (param) => {
  const {columns, data} = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '区间统计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}%`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}
</script>

<style lang="scss" scoped>
.title-span {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  font-size: 30px;
  font-size: large;
}

</style>
